<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/common/css/bootstrap.css">
    <link rel="stylesheet" href="/css/basic.css">
    <script src="/common/js/jquery-1.10.1.js"></script>
    <script src="/common/js/bootstrap.js"></script>
</head>

<body>
    <!-- 引入共同头部 -->
    <%- include('../common/header.ejs')%>
        <div class="container-fluid">
            <div class="row">
                <%- include('../common/sidebar.ejs',{flag:1})%>
                    <div class="col-sm-10">
                        <ol class="breadcrumb">
                            <li>用户管理
                            </li>
                            <li class="active">用户列表
                            </li>
                        </ol>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                搜索
                            </div>
                            <div class="panel-body">
                                <form role="form" class="form-inline" action="/admin/searchuser" method="GET">
                                    <div class="form-group">
                                        <label for="name">名称</label>
                                        <input type="text" class="form-control" id="name" placeholder="请输入名称" name="username" value="<%= searchname%>">
                                    </div>

                                    <div class="form-group">
                                        <button type="submit" class="btn btn-default">开始搜索</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- 列表展示-->
                        <div class="table-responsive">
                            <table class="table table-striped ">
                                <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>姓名</th>
                                        <th>年龄</th>
                                        <th>性别</th>
                                        <th>地址</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% userlist.forEach((value,index)=>{ %>
                                        <tr>
                                            <td>
                                                <%= (page-1)*5 + ++index %>
                                            </td>
                                            <td>
                                                <%= value.username %>
                                            </td>
                                            <td>
                                                <%= value.age %>
                                            </td>
                                            <td>
                                                <%= value.sex %>
                                            </td>
                                            <td>
                                                <%= value.address %>
                                            </td>
                                            <td class="text-center">
                                                <a href="/admin/edituser?id=<%= value._id %>" class="btn btn-primary">修改</a>
                                                <button type="button" class="btn btn-danger delBtn" data-toggle="modal" data-target="#myModal" data-id="<%= value._id %>">删除</button>
                                            </td>
                                        </tr>
                                        <% }) %>
                                </tbody>
                            </table>
                            <!-- 分页模板 -->

                            <ul class="pagination">
                                <li>
                                    <a href="">共<span><%=total%></span>条数据</a>
                                </li>
                                <li class="<%= page==1?'active':''%>">
                                    <a href="/admin/searchuser?page=1&username=<%= searchname%>">首页</a>
                                </li>
                                <li class="<%= page==1?'disabled':''%>">
                                    <a href="/admin/searchuser?page=<%=page-1%>&username=<%= searchname%>">上一页</a>
                                </li>
                                <%for(let i=1;i<=totalPage;i++){ %>
                                    <li class="<%= page==i?'active':''%>">
                                        <a href="/admin/searchuser?page=<%=i%>&username=<%= searchname%>">
                                            <%= i %>
                                        </a>
                                    </li>
                                    <%}%>
                                        <li class="<%= page==totalPage?'disabled':''%>">

                                            <a href="/admin/searchuser?page=<%= page<totalPage?page+1:totalPage%>&username=<%= searchname%>">下一页</a>
                                        </li>
                                        <li class="<%= page==totalPage?'active':''%>">
                                            <a href="/admin/searchuser?page=<%=totalPage%>&username=<%= searchname%>">末页</a>
                                        </li>
                            </ul>
                        </div>
                    </div>
            </div>
        </div>
        <%- include('../common/dialog.ejs')%>
            <script>
                // delBtn
                $('.delBtn').click(function() {
                    // 根据自定义data-id的值设置给hidden元素
                    $('#infoId').val($(this).data('id'));
                });
            </script>
</body>

</html>